<template>
  <div>
    <form>
      <el-card>
        <!-- 搜索区-->
        <div class="demo-input-size">
          <el-select slot="prepend" placeholder="场地类型" v-model="queryInfo.type">
            <el-option :label="item" :value="item" v-for="(item,index) in initType" :key='index'></el-option>
          </el-select>
          &nbsp; &nbsp; &nbsp;
          <el-select slot="prepend" placeholder="预约状态" v-model="queryInfo.state">
            <el-option label="未退订" value="0"></el-option>
            <el-option label="已退订" value="1"></el-option>
          </el-select>
          <span class="demonstration"></span>
          <el-date-picker
            v-model="queryInfo.startData"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="预约起始日期">
          </el-date-picker>
          ---
          <span class="demonstration"></span>
          <el-date-picker
            v-model="queryInfo.endData"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="预约结束日期">
          </el-date-picker>
          <el-button type="primary" @click="query(1,pageSize,queryInfo)">搜索</el-button>
          &nbsp;
          <el-button type="warning" @click="reset">重置</el-button>
        </div>
        <!--展示区-->
        <el-table :data="orderList" border stripe :default-sort="{prop: 'orderCreateTime', order: 'descending'}">
          <el-table-column type="index" label="序号"></el-table-column>
          <el-table-column label="用户名" prop="orderUserName"></el-table-column>
          <el-table-column label="场地类型" prop="orderSpaceName"></el-table-column>
          <el-table-column label="场地地点" prop="orderSpaceSite"></el-table-column>
          <el-table-column label="预约日期" prop="orderData"></el-table-column>
          <el-table-column label="预约时间" prop="orderTime"></el-table-column>
          <el-table-column label="下单时间" prop="orderCreateTime" min-width="112px" sortable></el-table-column>
          <el-table-column label="是否已退订">
            <template slot-scope="scope">
              <el-switch v-model=" scope.row.state" disabled></el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="danger" round size="mini" @click="adminCancelOrder(scope.row.orderNo)">取消订单</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--      分页区-->
        <div class="block">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="pageNum"
            :page-size="pageSize"
            layout="total, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </el-card>
    </form>
  </div>
</template>

<script>
import axios from "axios";

export default {
  created() {
    this.$http.get("/user/init",).then(res => {
      if (res.data.code === 200) {
        this.initType = res.data.data.type;
      } else {
        this.$message.error(res.data.msg)
      }
    }).catch(err => {
      console.log(err);
    })
    this.query(1, this.pageSize, this.queryInfo)
  },
  name: "Order",
  data() {
    return {
      initType: [],
      queryInfo: {
        startData: null,
        endData: null,
        state: null,
        type: null,
      },
      pageNum: 1,
      pageSize: 7,
      total: 0,
      orderList: [],
    }
  },
  methods: {
    query(pageNum, pageSize, queryInfo) {
      axios.get("/admin/queryOrder", {
        params: {
          pageNum, pageSize, queryInfo
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.orderList = res.data.data.list
          this.total = res.data.data.total
        } else {
          this.$message.error("查询失败")
        }
      }).catch(err => {
        console.log(err)
      })
    },

    handleCurrentChange() {
      this.query(this.pageNum, this.pageSize, this.queryInfo)
    },
    reset() {
      this.queryInfo.startData = null,
        this.queryInfo.endData = null,
        this.queryInfo.state = null,
        this.queryInfo.type = null
    },
    adminCancelOrder(orderNo) {
      this.$confirm('确认取消订单?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(() => {
        this.sendCancelOrder(orderNo);
      })
    },
    sendCancelOrder(orderNo) {
      axios.get("user/cancel",{
        params:{
          orderNo
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.$message.success("退订成功");
          this.loadMyOrderDetail();
        } else {
          this.$message.error("退订失败，请重试")
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.el-input {
  width: 200px;
  margin: 20px;
}
</style>
